import { useStore } from 'vuex';
import { computed, ref, watch } from 'vue';

export default function useCD() {
  // cd
  const cdRef = ref(null);
  // cd外层容器
  const cdImage = ref(null);

  const store = useStore();
  // 当前歌曲播放状态
  const playing = computed(() => store.state.playing);

  // 根据当前歌曲播放状态计算CD样式
  const cdCls = computed(() => {
    return playing.value ? 'playing' : '';
  });

  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      // 歌曲暂停时同步旋转角度
      syncTransform(cdRef.value, cdImage.value);
    }
  });

  function syncTransform(wrapper, inner) {
    // 获取容器旋转角度
    const wrapperTransform = getComputedStyle(wrapper).transform;
    // window.getComputedStyle() 获取当前元素最终使用的CSS
    const innerTransform = getComputedStyle(inner).transform;
    console.log(wrapperTransform, 'wrapperTransform');
    console.log(innerTransform, 'innerTransform');
    // 同步外层容器旋转角度
    // 如果外层容器没有角度,直接使用内层cd的旋转角度,如果外层容器有角度,则需要和内层cd的旋转角度叠加才是最初相对于0的角度的旋转
    wrapper.style.transform = wrapperTransform === 'none' ? innerTransform : innerTransform.concat(' ', wrapperTransform);
  }

  return {
    cdCls,
    cdRef,
    cdImage
  };
}
